/**
 *  弹窗
 * @author xiaoxujs
 */

import { FC, useCallback, useEffect, useRef, useState } from "react";
import { FormBox, FormItemBox, ModalBox } from "./style";
import { ButtonX, InputX } from "../../../../../../components/UiManagement";
import { ISyhtDictTelecontrolGetDictTelecontrolAll, ISyhtDictTelecontrolUpdateTelecontrolParams } from "../../../../../../type/ConfigManagement/DicManaged/DicManagedYaokong";
import { postSyhtDictTelecontrolAddTelecontrol, postSyhtDictTelecontrolUpdateTelecontrol } from "../../../../../../api/ConfigManagement/DicManaged/DicManagedYaokongApi";


const AddChangeModule: FC<{
    open: boolean,
    onClose: () => void, // 关闭弹窗
    changeData?: ISyhtDictTelecontrolGetDictTelecontrolAll  // 修改的数据
}> = ({
    open,
    onClose,
    changeData
}) => {

        const ModuleBoxRef = useRef<HTMLDivElement>(null); // 弹窗的ref 外层
        const moduleBoxContentRef = useRef<HTMLDivElement>(null); // 弹窗的ref 内层

        const [eventName, setEventName] = useState<string>(''); //事件分组名称

        // 点击取消按钮
        const handleCancel = useCallback(
            () => {
                setEventName('') // 清空分组名称
            },
            [],
        )
        useEffect(() => {
            if (ModuleBoxRef.current && moduleBoxContentRef.current) {
                ModuleBoxRef.current.addEventListener('click', (event: any) => {
                    if (moduleBoxContentRef.current?.contains(event.target as Node)) {

                    } else {
                        handleCancel();
                        onClose();
                    }
                })
            }
        }, [handleCancel, onClose])
        // 回显
        useEffect(() => {
            if (changeData) { // 修改的数据
                setEventName(changeData.telecontrolName) // 事件分组名称
            }
        }, [changeData])




        // 修改事件分组名称
        const handleChangeEventName = (value: string) => {
            setEventName(value);
        }
        // 点击确定按钮
        const handleSumber = async () => {
            if (eventName) {
                if (changeData) { // 修改的数据
                    // const params = 
                    const params: ISyhtDictTelecontrolUpdateTelecontrolParams = {
                        telecontrolId: changeData.telecontrolId, // 遥控分组id
                        telecontrolName: eventName, // 遥控分组名称
                    }

                    const { code, msg } = await postSyhtDictTelecontrolUpdateTelecontrol(params) as { code: number, msg: string }; // 修改菜单
                    if (code === 200) {
                        alert('分组数据修改成功')
                        handleCancel(); // 清空数据
                        onClose(); // 关闭弹窗 
                    } else {
                        alert(msg)
                    }
                } else {
                    const params = {
                        telecontrolName: eventName, // 事件分组名称
                    }
                    const { code, msg } = await postSyhtDictTelecontrolAddTelecontrol(params) as { code: number, msg: string }; // 新增菜单
                    if (code === 200) {
                        alert('分组添加成功')
                        handleCancel(); // 清空数据
                        onClose(); // 关闭弹窗
                    } else {
                        alert(msg)
                    }
                }

            } else {
                alert('请完善信息')
            }
        }


        return <ModalBox ref={ModuleBoxRef} open={open}>
            <div ref={moduleBoxContentRef} className="modal-content" >
                <div className="modal-header">
                    <div className="modal-title">添加</div>
                    <span className="guanbi" aria-hidden="true" onClick={() => {
                        handleCancel()
                        onClose();
                    }}>&times;</span>
                </div>
                <div className="modal-body">
                    <FormBox>
                        <FormItemBox>
                            <div className="form_title_box">分组名称</div>
                            <InputX value={eventName} onChange={handleChangeEventName} />
                        </FormItemBox>
                    </FormBox>
                </div>
                <div className="modal-footer">
                    <div style={{ marginRight: '2rem' }}>
                        <ButtonX type="info" onClick={() => {
                            handleCancel()
                            onClose();
                        }}>取消</ButtonX>
                    </div>
                    <ButtonX type='primary' onClick={() => handleSumber()}>确定</ButtonX>
                </div>
            </div>
        </ModalBox>
    }

export default AddChangeModule;